<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>

    //数组去重
    function fn(){
        let arr=[1,2,3,3,4]
        let set=new Set(arr)
        let newArr=Array.from(set)
    }
    //写一个数据结构，来表示dom节点是否可见, 
    //并指导页面的渲染；{domA: true, domB: false} => 页面渲染A，隐藏B (用Map数据结构)
    function fn2(){
        const domA=document.createElement("div")
        const domB=document.createElement("div")
        domA.innerHTML="domA"
        domB.innerHTML="domB"
        const domMap=new Map()
        domMap.set(domA,false)
        domMap.set(domA,true)
        console.log(domMap)
        domMap.forEach((display,dom)=>{
            if(display){
                document.body.appendChild(dom)
            }
        })
    }
    fn2()
    //《控制台的模拟人生》
    function wait(todo,time){
        const wait=new Promise((resolve, reject) => {
            setTimeout(()=>{
                resolve(todo)
            },time)
        })
        return wait
    }
    function begin(){
        console.log("早上起床了")
       
        wait("我吃饭了",1000)
        .then(res=>{
            console.log(res)
            return wait('我累了，想去ktv！',2000)
        })
        .then(res=>{
            console.log(res)
            return wait("在红浪漫快乐的生活",3000)
        }).then(res=>{
            console.log(res)
        })
        
    }
    
    async function newBegin(){
        console.log("早上起床了")
        console.log(await wait("我吃饭了",1000))
        console.log(await wait('我累了，想去ktv！',2000))
        console.log(await wait("在红浪漫快乐的生活",3000))
    }
    // newBegin()
    //用promise封装一个加载图片的方法，未加载完成前显示“Loading...”
    function loading(src){
        return new Promise((resolve, reject) => {
            const img=document.createElement('img')
            img.onload=()=>{
                resolve(img)
            }
            img.src=src
        })
    }
    async function fn3(){
        const imgWrapper=document.createElement('div')
        const loadingtext=document.createElement('p')
        loadingtext.innerHTML="loading..."
        imgWrapper.appendChild(loadingtext)
        document.body.appendChild(imgWrapper)
        const imgurl=await loading("https://static.runoob.com/images/demo/demo2.jpg")
        imgWrapper.appendChild(imgurl)
        loadingtext.style.display="none"
    }
  
</script>
<style>
    img{
        width: 100%;
    }
</style>
</htm